<template>
	<view class="main-box">
		<u-field v-model="email" label="邮箱" placeholder="请填写邮箱">
		</u-field>
		<u-button class="getCode" :style="[inputStyle]" @click="handleToCode">发送验证码</u-button>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				email: ''
			}
		},
		computed: {
			inputStyle() {
				let style = {};
				if (this.email) {
					style.color = "#fff";
					style.backgroundColor = '#92c8ff';
				}
				return style;
			}
		},
		methods: {
			handleToCode(){
				if(this.$u.test.email(this.email)){
					uni.navigateTo({
						url:`/pages/user/code?email=${this.email}&type=3`
					})
				}else{
					this.$refs.uToast.show({
						title: '请输入正确的邮箱地址',
						type: 'error',
						position: 'top'
					});
				}
			}
		}
	}
</script>

<style scoped>
	.main-box{
		padding: 80rpx;
	}
	.getCode {
		margin-top: 20rpx;
		background-color: rgba(146, 200, 255, .4);
		color: rgba(255, 255, 255, .8);
		border: none;
		font-size: 30rpx;
		padding: 12rpx 0;
	}
	.getCode::after {
		border: none;
	}
</style>
